由於以巴戰爭的新聞

我們來寫一下 新聞閱讀器

咒語:創建一個新聞閱讀器頁面，使用 Material-UI 的標簽、卡片和按鈕組件，讓用戶瀏覽不同主題的新聞文章 文章內容需要簡單描述一下 並且根據tab的篩選篩選內容

import React, { useState } from "react";
import { AppBar, Container, Paper, Tabs, Tab, Typography } from "@mui/material";

const newsData = [
  {
    id: 1,
    category: "科技",
    title: "新科技改變我們的生活",
    content: "介紹了新科技對生活的影響和未來趨勢。"
  },
  {
    id: 2,
    category: "體育",
    title: "足球比賽結果",
    content: "關於最新一場足球比賽的報道和比分。"
  },
  {
    id: 3,
    category: "政治",
    title: "國家政策更新",
    content: "最新的國家政策變化和其影響。"
  },
  {
    id: 4,
    category: "娛樂",
    title: "新電影上映",
    content: "一部備受期待的電影即將上映，詳細介紹。"
  }
];

function NewsReader() {
  const [selectedTab, setSelectedTab] = useState(0);
  const [selectedNews, setSelectedNews] = useState(null);

  const handleChange = (event, newValue) => {
    setSelectedTab(newValue);
    setSelectedNews(null); // 清空已選擇的新聞
  };

  const handleNewsClick = (newsId) => {
    const news = newsData.find((news) => news.id === newsId);
    setSelectedNews(news);
  };

  const filteredNews = newsData.filter(
    (news) =>
      selectedTab === 0 || // 如果 selectedTab 是 0，不進行篩選
      news.category === ["全部", "科技", "體育", "政治", "娛樂"][selectedTab]
  );

  return (
    <Container>
      <Tabs value={selectedTab} onChange={handleChange}>
        <Tab label="全部" />
        <Tab label="科技" />
        <Tab label="體育" />
        <Tab label="政治" />
        <Tab label="娛樂" />
      </Tabs>

      <Paper elevation={3} style={{ padding: "16px", margin: "16px 0" }}>
        {selectedNews ? (
          <div>
            <Typography variant="h4">{selectedNews.title}</Typography>
            <Typography variant="body1">{selectedNews.content}</Typography>
          </div>
        ) : (
          <Typography variant="h6">請選擇一篇新聞閱讀</Typography>
        )}
      </Paper>
      {filteredNews.map((news) => (
        <Paper
          key={news.id}
          elevation={2}
          style={{ padding: "12px", marginBottom: "12px", cursor: "pointer" }}
          onClick={() => handleNewsClick(news.id)}
        >
          <Typography variant="h6">{news.title}</Typography>
          <Typography variant="body2">{news.category}</Typography>
        </Paper>
      ))}
    </Container>
  );
}

export default NewsReader;

發現他沒寫好篩選的邏輯

咒語:const filteredNews = newsData.filter(
(news) =>
news.category === ["全部", "科技", "體育", "政治", "娛樂"][selectedTab]
);selectedTab 是0時 就不filter

const filteredNews = newsData.filter(
  (news) =>
    selectedTab === 0 || // 如果 selectedTab 是 0，不進行篩選
    news.category === ["全部", "科技", "體育", "政治", "娛樂"][selectedTab]
);

這樣簡易的新聞篩選就可以做完了